@use "theme/globals" as *;

@mixin inline() {
    &:not(.core-loading-loaded) {
        min-height: calc(var(--internal-loading-inline-min-height) + 32px);
        width: 100%;
        position: relative;
    }

    .core-loading-container {
        --loading-background: rgba(var(--loading-background-inline), 0.4);
        flex-direction: row;
        height: auto;

        .core-loading-message {
            @include margin(0px, 0px, 0px, 16px);
        }
    }
}

:host {
    --loading-background: var(--ion-background-color);
    --loading-background-inline: var(--ion-background-color-rgb);
    --loading-spinner: var(--core-loading-spinner);
    --loading-text-color: var(--ion-text-color);
    --loading-inline-margin: 0px;
    --loading-inline-min-height: 28px;
    --internal-loading-inline-min-height: var(--loading-inline-min-height);
    --loading-display: flex;
    --loading-display-message: block;
    --contents-display: block;

    --loading-placeholder-direction: column;
    --loading-placeholder-justify: flex-start;
    --loading-placeholder-align-items: center;
    --loading-placeholder-align-content: center;
    --loading-placeholder-wrap: nowrap;
    --loading-placeholder-gap: 16px;

    --loading-placeholder-padding: 16px;
    --loading-placeholder-margin: 0px;
    --loading-placeholder-max-height: none;
    --loading-placeholder-element-radius: var(--mdl-shape-borderRadius-md);
    --loading-placeholder-element-width: 100px;
    --loading-placeholder-element-height: 100px;

    --loading-placeholder-element-column-width: 100%;

    --placeholder-color: var(--gray-500);
    --placeholder-highlight: var(--loading-background);

    @include core-transition(all, 200ms);
    display: var(--contents-display);

    &.core-loading-loaded {
        position: static;
        --contents-display: contents;
        --internal-loading-inline-min-height: 0px;

        &.has-spacer {
            --contents-display: flex;
            min-height: 100%;
            flex-direction: column;
        }
    }

    .core-loading-container {
        user-select: none;
        pointer-events: all; // Block clicks
        position: absolute;
        @include position(0, 0, 0, 0);
        height: 100%;
        width: 100%;
        z-index: 100;
        margin: 0;
        padding: 0;
        color: var(--loading-text-color);
        background-color: var(--loading-background);
        @include core-transition(all, 200ms);
        display: var(--loading-display);
        justify-content: center;
        align-items: center;
        flex-direction: column;

        .core-loading-message {
            @include margin(16px, 0, 0, 0);
            display: var(--loading-display-message);
        }

        ion-spinner {
            --color: var(--loading-spinner);
            color: var(--color);
        }

        .placeholder {
            position: absolute;
            @include position(0px, 0px, 0px, 0px);
            height: 100%;
            width: 100%;
            overflow: hidden;
            display: flex;
            flex-direction: var(--loading-placeholder-direction);
            flex-wrap: var(--loading-placeholder-wrap);
            gap: var(--loading-placeholder-gap);
            padding: var(--loading-placeholder-padding);
            margin: var(--loading-placeholder-margin);
            justify-content: var(--loading-placeholder-justify);
            align-items: var(--loading-placeholder-align-items);
            align-content: var(--loading-placeholder-align-content);
            max-height: var(--loading-placeholder-max-height);

            &.row,
            &.rowwrap {
                --loading-placeholder-direction: row;
            }

            &.column,
            &.columnwrap,
            &.free,
            &.imageandboxes {
                --loading-placeholder-element-width: var(--loading-placeholder-element-column-width);
                --loading-placeholder-direction: column;
            }


            &.rowwrap,
            &.columnwrap,
            &.free {
                --loading-placeholder-wrap: wrap;
            }

            &.listwithavatar,
            &.listwithicon,
            &.free {
                --loading-placeholder-gap: 0px;
                --loading-placeholder-padding: 0px;

                ::ng-deep {
                    ion-avatar ion-skeleton-text {
                        --loading-placeholder-element-radius: 100%;
                    }

                    ion-skeleton-text {
                        border-radius: var(--loading-placeholder-element-radius);
                    }

                    & > * {
                        width: var(--loading-placeholder-element-column-width);
                        flex-shrink: 0;
                    }
                }
            }

            ion-skeleton-text.placeholder-element {
                flex-shrink: 0;
                margin: 0px;
                width: var(--loading-placeholder-element-width);
                height: var(--loading-placeholder-element-height);
                border-radius: var(--loading-placeholder-element-radius);
            }
        }
    }

    &.core-loading-inline {
       @include inline();
    }
}

// Force inline on some contexts.
:host-context(ion-item),
:host-context(core-block) {
    // Implicit Inline.
    @include inline();
}

@keyframes core-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
